<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>

<div class="bjui-pageContent">
    <div id="log-container"
         style="height: 100%; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;font-size: 13px;">
        <div></div>
    </div>
</div>
<div class="bjui-pageFooter">
    <ul>
        <li>
            <button id="exit" type="button" class="btn btn-close" data-icon="close" data-toggle="tooltip"
                    data-placement="top"
                    onclick="closeWebSocket()">退出
            </button>
        </li>
        <li>&nbsp;</li>
        <li>
            <button type="button" class="btn btn-green" onclick="$('#log-container div').html('')">清屏</button>
        </li>
        <li>&nbsp;</li>
        <li>
            <button id="switch" type="button" class="btn btn-green" onclick="switchs()">自动滚动</button>
        </li>
        <li>&nbsp;</li>
        <li>
            <button type="button" class="btn btn-danger" onclick="sendLevel('ERROR')">ERROR</button>
        </li>
        <li>&nbsp;</li>
        <li>
            <button type="button" class="btn btn-warning" onclick="sendLevel('WARN')">WARN</button>
        </li>
        <li>&nbsp;</li>
        <li>
            <button type="button" class="btn btn-info" onclick="sendLevel('INFO')">INFO</button>
        </li>
        <li>&nbsp;</li>
        <li>
            <button type="button" class="btn btn-success" onclick="sendLevel('DEBUG')">DEBUG</button>
        </li>
        <li>&nbsp;</li>
        <li>
            <button type="button" class="btn btn-primary" onclick="sendLevel('ALL')">ALL</button>
        </li>
        <%--<li>&nbsp;</li>--%>
        <%--<li>--%>
            <%--<label>--%>
                <%--数据源：--%>
                <%--<select data-toggle="selectpicker" onchange="sendSource($(this).val())">--%>
                    <%--<option value="all">全部</option>--%>
                    <%--<option value="admin">后台</option>--%>
                    <%--<option value="portal">前台</option>--%>
                <%--</select>--%>
            <%--</label>--%>
        <%--</li>--%>
    </ul>
</div>
<script type="text/javascript">
    var differ = 27;
    var flag = false;
    $(function () {
//        var target = $('#exit');
//        target.attr("data-original-title", "退出请点击这里,否则可能会出现重复日志!");
//        target.tooltip().tooltip('show').focus();
//        setTimeout(function () {
//            target.attr("data-original-title", "");
//            target.tooltip('hide');
//        }, 5000);
    });
    var websocket = null;
    var server = "${pageContext.request.getServerName()}";
    var port = "${pageContext.request.getServerPort()}";
    var path = "${pageContext.request.contextPath}";
    var webSocketUrl = "ws://" + server + ":" + port + path + "/view/" + '${userCode}';
    if ('WebSocket' in window) {
        websocket = new WebSocket(webSocketUrl);
    } else {
        alert('Not support websocket')
    }

    websocket.onerror = function () {
        setMessageInnerHTML("服务器连接发生错误！");
    };

    websocket.onopen = function () {
        setMessageInnerHTML("服务器连接成功！");
    };

    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    };

    websocket.onclose = function () {
        setMessageInnerHTML("连接已断开！");
    };

    //当窗口关闭时，主动去关闭websocket连接。
    window.onbeforeunload = function () {
        closeWebSocket();
    };

    function switchs() {
        if (!flag) {
            $('#switch').html('开启');
            flag = true;
        } else {
            $('#switch').html('关闭');
            flag = false;
        }
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {

        // 接收服务端的实时日志并添加到HTML页面中
        $("#log-container div").append(innerHTML + "<p>&nbsp;</p>");

        if (flag)
            $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height() + differ);
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    function sendLevel(msg) {
        setMessageInnerHTML("显示 " + msg + " 级别！");
        websocket.send('Level:' + msg);
    }

    function sendSource(msg) {
        setMessageInnerHTML("数据源切换为 " + msg);
        websocket.send('Source:' + msg);
    }
</script>
